和 Android 中的 Spinner 不一样,Flutter 中的下拉菜单其实是按钮中的一种形式,从命名上就可以看出来:DropdownButton

先看源码:

  DropdownButton({
    Key key,
    @required this.items,
    this.value,
    this.hint,
    this.disabledHint,
    @required this.onChanged,
    this.elevation = 8,
    this.style,
    this.underline,
    this.icon,
    this.iconDisabledColor,
    this.iconEnabledColor,
    this.iconSize = 24.0,
    this.isDense = false,
    this.isExpanded = false,
  })
  • items

    下拉选项,List<DropdownMenuItem<T>> 类型的。

  • value

    选定的值。

  • hint

    下拉菜单显示的占位符,是 Widget 类型的。

  • disabledHint

    禁用下拉菜单时,显示的占位符,Widget 类型的。

  • onChanged

    用户选择选项时调用:

    • 当该属性为 null 时,下拉按钮将被禁用,箭头变成灰色,并且不再响应用户的点击,并且显示 hint 或者 disabledHint 设置的内容,如果二者均设置,会优先显示 disabledHint
  • elevation

    打开菜单时放置菜单的Z坐标,通俗的讲究是 Item 展开时的阴影。

    有以下值可选:1、2、3、4、6、8、9、12、16 和 24。

    默认值为 8,是下拉按钮的适当标高。

  • style

    下拉按钮和点击该按钮时出现的下拉菜单中的文本的文本样式。

  • underline

    用于装饰下拉菜单的下划线,如果不设置,则显示高度为 1.0 的默认下划线样式,如果不想要下划线,则需要将其 高度设置为 0。

    //不显示下划线
    underline: Container(height: 0, color: Colors.red),
    
  • icon

    设置下拉菜单右侧的图标

    icon: Icon(
                Icons.airplay,
                size: 20,
              ),
    
  • iconDisabledColor

    如果设置了 Icon,并且该下拉菜单无效(onChanged 为 null 或者 items 为 null)时,Icon 显示的颜色。

  • iconEnabledColor

    右侧如表(或者向下箭头)的颜色

  • iconSize

    设置 Icon 的大小(如果 Icon 单独设置了,以 Icon 设置的为准)

  • isDense

    用来调整按钮高度,true 时将按钮高度缩小,缩小的高度通过 Theme _kDenseButtonHeight 决定,但不会缩小太多导致图标剪切;

  • isExpanded

    用于是否填充按钮宽度到父控件,true 为填充,false 为默认不填充

一个简单的示例:

class _SwitchAndCheckBoxTestRouteState
    extends State<SwitchAndCheckBoxTestRoute> {
  List<DropdownMenuItem> getItems() {
    List<DropdownMenuItem> items = new List();
    for (int i = 0; i < 10; i++) {
      items.add(DropdownMenuItem(
        value: "${i}",
        child: Text("item ${i}"),
      ));
    }
    return items;
  }

  var itemValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("下拉菜单"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: DropdownButton(
          hint: Text("请选择"),
          items: getItems(),
          value: itemValue,
          elevation: 1,
          icon: Icon(
            Icons.airplay,
            size: 20,
          ),
          onChanged: (T) {
            //下拉菜单item点击之后的回调
            setState(() {
              itemValue = T;
            });
          },
        ),
      ),
    );
  }
}

效果如下:

results matching ""

    No results matching ""